<template>
  <div class="list-table">
    <el-row>
      <el-col v-loading="chartLoading" :span="12">
        <div class="area-header">
          <span class="area-header-title">{{ $t('资产评级(数量)(个)') }}</span>
        </div>
        <pieChart v-if="numData.datas.length > 0" :chart-data="numData" height="45vh" />
        <div v-else class="noneData" style="height: 45vh;">
          <div>
            <svg-icon icon-class="none" class-name="none-icon" />
            <p>{{ $t('暂无数据') }}</p>
          </div>
        </div>
      </el-col>
      <el-col v-loading="chartLoading" :span="12">
        <div class="area-header">
          <span class="area-header-title">{{ $t('资产评级(金额)') + $t('金额单位') }}</span>
        </div>
        <pieChart v-if="amountData.datas.length > 0" :chart-data="amountData" height="45vh" />
        <div v-else class="noneData" style="height: 45vh;">
          <div>
            <svg-icon icon-class="none" class-name="none-icon" />
            <p>{{ $t('暂无数据') }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="area-header">
          <span class="area-header-title">{{ $t('资产评级列表') }}</span>
        </div>
        <el-form ref="queryForm" :model="queryParams" :inline="true">
          <el-form-item :label="$t('项目名称')" prop="dealId">
            <MainBodySelect
              v-model="queryParams.dealId"
              parameters="deal"
            />
          </el-form-item>
          <el-form-item :label="$t('评级时间')" prop="ratingDate">
            <DatePicker v-model="dateRange" type="daterange" />
          </el-form-item>
          <el-form-item :label="$t('评级人员')" prop="ratingStaff">
            <UserSelect v-model="queryParams.ratingStaff" :placeholder="$t('评级人员')" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
            <el-button
              v-hasPermi="['deal:rating:export']"
              type="warning"
              icon="el-icon-download"
              size="mini"
              @click="exportHandle"
            >{{ $t("导出") }}</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="tableLoading" tooltip-effect="darkTable" :data="tableList" border>
          <el-table-column :label="$t('项目名称')" align="center" prop="dealName" show-overflow-tooltip>
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
                class="link_a"
              >{{ scope.row.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('当前评级')" align="center" prop="currentRating" show-overflow-tooltip :formatter="currentRatingFormat" width="120" />
          <el-table-column :label="$t('评级时间')" align="center" prop="ratingDate" show-overflow-tooltip width="120">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.ratingDate) }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('评级人员')" align="center" prop="ratingStaffName" show-overflow-tooltip width="120" />
          <el-table-column :label="$t('评级依据')" align="center" prop="ratingDescribe" show-overflow-tooltip />
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getTableList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import pieChart from '@/views/chart/pieChart'
import MainBodySelect from '@/components/MainBodySelect/index'
import { countAssetRatingNum, countAssetRatingAmount, findLatestByGroupByDealId } from '@/api/deal/rating/dealAssetRating'
export default {
  components: { pieChart, MainBodySelect },
  data() {
    return {
      // 项目数量统计
      numData: {
        radius: [0, 70],
        legend: true,
        borderRadius: 10,
        datas: []
      },
      // 投资金额统计
      amountData: {
        radius: [0, 70],
        legend: true,
        valueFormatter: true,
        borderRadius: 10,
        datas: []
      },
      // 表格数据
      tableList: [],
      dateRange: [],
      // 当期评级字典
      currentRatingOptions: [],
      chartLoading: false,
      tableLoading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dealId: undefined,
        ratingStaff: undefined
      },
      total: 0,
      amountShow: true
    }
  },
  created() {
    this.getDicts('current_rating_type').then(response => {
      this.currentRatingOptions = response.data
    })
    this.getChartList()
    this.getTableList()
  },
  methods: {
    getChartList() {
      this.chartLoading = true
      countAssetRatingNum().then(response => {
        this.chartLoading = false
        this.numData.datas = []
        if (!this.isEmpty(response.data)) {
          this.numData.datas = response.data.filter(v => v.currentRatingLabel)
          this.numData.datas.forEach(item => {
            if (item.currentRatingLabel === '正常') {
              item.itemStyle = { color: '#91cd77' }
            } else if (item.currentRatingLabel === '关注') {
              item.itemStyle = { color: '#f9c956' }
            } else if (item.currentRatingLabel === '可疑') {
              item.itemStyle = { color: '#EE6666' }
            } else if (item.currentRatingLabel === '次级') {
              item.itemStyle = { color: '#ef6567' }
            } else if (item.currentRatingLabel === '损失') {
              item.itemStyle = { color: '#FF2712' }
            }
            item.name = this.$t(item.currentRatingLabel)
            item.value = item.count
          })
        }
      })
      countAssetRatingAmount().then(response => {
        this.chartLoading = false
        this.amountData.datas = []
        if (!this.isEmpty(response.data)) {
          this.amountData.datas = response.data.filter(v => v.currentRatingLabel)
          this.amountData.datas.forEach(item => {
            if (item.currentRatingLabel === '正常') {
              item.itemStyle = { color: '#91cd77' }
            } else if (item.currentRatingLabel === '关注') {
              item.itemStyle = { color: '#f9c956' }
            } else if (item.currentRatingLabel === '可疑') {
              item.itemStyle = { color: '#EE6666' }
            } else if (item.currentRatingLabel === '次级') {
              item.itemStyle = { color: '#ef6567' }
            } else if (item.currentRatingLabel === '损失') {
              item.itemStyle = { color: '#FF2712' }
            }
            item.name = this.$t(item.currentRatingLabel)
            item.value = item.amount
          })
        }
      })
    },
    getTableList() {
      this.tableLoading = true
      findLatestByGroupByDealId(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
        this.tableList = response.rows
        this.total = response.total
        this.tableLoading = false
      })
    },
    // 当期评级字典翻译
    currentRatingFormat(row) {
      return this.selectDictLabel(this.currentRatingOptions, row.currentRating)
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getTableList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.dateRange = undefined
      this.queryHandle()
    },
    exportHandle() {
      this.downLoadExcel('/rating/dealAssetRating/reportExport', this.queryParams)
    }
  }
}
</script>

<style scoped>

</style>
